<template>
  <div>
    <div style="background-color: #fff; height: 100px">
      专题名称：<el-input
        v-model="input"
        style="width: 240px"
        placeholder="请输入内容"
      /><br />
      <div style="margin-top: 20px">
        <el-button @click="search">检索</el-button>
        <el-button @click="reset">重置</el-button>
        <el-button type="primary" @click="router.push('/index/addSman')"
          >新增专题</el-button
        >
      </div>
    </div>
    <div style="margin-top: 20px; background-color: #fff; height: 400px">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="name" label="专题名称" width="350" />
        <el-table-column prop="num" label="相关单品" width="250" />
        <el-table-column
          prop="time"
          label="发布时间"
          :formatter="dateFormat"
          width="250"
        />
        <el-table-column  label="状态" width="250" >
          <template v-slot="scope">
            
              {{ scope.row.flag ? "正常" : "禁用" }}
          
          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="200">
          <template v-slot="scope">
            <el-button link type="primary" @click="edit(scope.row)">
              编辑
            </el-button>
            <el-button
              link
              type="primary"
       
              @click="changeFlag(scope.row._id)"
              >{{ scope.row.flag ? "禁用" : "正常" }}</el-button
            >
       
            
            <el-button link type="primary" @click="del(scope.row._id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination background layout="prev, pager, next" :total="10" />
    </div>
  </div>
</template>

<script setup lang="ts">
import axios from "axios";
import { onMounted, ref } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
const input = ref("");
const tableData = ref([]);
const getlist = async () => {
  let res = await axios.get("http://localhost:3000/zjm/sman");
  tableData.value = res.data.list;
  console.log(res.data.list);
};
const dateFormat = (row, column, cellValue, index) => {
  const daterc = row[column.property];
  if (daterc != null) {
    var date = new Date(daterc);
    var year = date.getFullYear();
    /* 在日期格式中，月份是从0开始，11结束，因此要加0
     * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
     * */
    var month =
      date.getMonth() + 1 < 10
        ? "0" + (date.getMonth() + 1)
        : date.getMonth() + 1;
    var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
    var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
    var minutes =
      date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
    var seconds =
      date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
    // 拼接
    return (
      year +
      "-" +
      month +
      "-" +
      day +
      " " +
      hours +
      ":" +
      minutes +
      ":" +
      seconds
    );
  }
};
const search = () => {
  tableData.value.forEach((item) => {
    tableData.value = tableData.value.filter((item) =>
      item.name.includes(input.value)
    );
  });
  input.value = "";
};
const reset = () => {
  input.value = "";
};
const edit = (ls: any) => {
  router.push(`/index/editSman?_id=${ls._id}`);
};
const del = async (id: any) => {
  await axios
    .post(`http://localhost:3000/zjm/delsman`, { _id: id })
    .then((res) => {
      getlist();
    });
};
const changeFlag = async(id:string) => {
  let data = {
    _id:id,
  }
  await axios.post('http://localhost:3000/zjm/editqijin',data).then((res) => {
    getlist()
  })
};

onMounted(() => {
  getlist();
});
</script>

<style scoped>
</style>